<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>我的文章</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
body{
    background: #F5F7F8;
}
.notData{
  background: #F5F7F8;

}
/*#conTop{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 14
}*/
.conBox{
    color:#333;
    padding: 0.7rem 0.8rem 0.7rem 1.5rem;
}
.conBox p{
    color:#333333;
}
.conBox ul li>img{
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    margin-top: 0.4rem;
}
.numBold{
    font-size:1.2rem;
    color:#333;
    font-weight: bold;
    text-align: center;
}
/*修改aui默认样式*/
.aui-tab{
    box-shadow: none;
    -moz-box-shadow: none;/* 老的 Firefox */
    padding: 0 0.2rem;
}
.aui-tab .aui-tab-item {
    font-size: 0.6rem;
    height: 1.8rem;
    line-height: 1.8rem;
    position: relative;
}
.pt-8{
  padding-top: 0.4rem;
}
.nameLike{
  padding-top: 0.4rem;
}
.nameLike .follow{
  width: 4rem;
  height: 1.2rem;
  line-height: 1.2rem;
  background: #E73350;
  font-size:0.6rem;
  border-radius: 5rem;
  text-align: center;
  color:#fff;
}
.text-bold{
  font-weight: bold;
}
.disbale{
  background: #ccc !important;
}
.comGodList .btmInfo .like {
	color: #adadad;
	padding-left: 0.85rem;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 0.6rem;
	background-image: url(../../image/common/21.png);
}
.comGodList .btmInfo .like.on {
	color: #333;
	background-image: url(../../image/common/22.png);
}
.earnPrice{
  position: absolute;
  top:0.45rem;
  right:0;
  width: 2.9rem;
  height: 1rem;
  background: #E73350;
  border-radius: 100px 0 0 100px;
  font-size: 10px;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.1rem;
}
</style>
</head>
<body>
  <div class="aui-content bg-white" id="conTop">
    <div id="dot_html">

    </div>
  </div>
    <script type="text/x-dot-template" id="dot_tpl">
      <div class="aui-content bg-white" id="conTop">
          <div class="conBox">
              <ul class="aui-flex-col aui-flex-between aui-flex-middle">
                  <li>
                      <img class="img" src="{{=it.user_avatar}}" alt="">
                      <p class="aui-font-size-14 aui-text-center text-bold pt-8" id="myName">{{=it.user_nickname}}</p>
                  </li>
                  <li tapmode onclick="openWin('follow_win')">
                      <p class="numBold">{{=it.concern || '0'}}</p>
                      <p class="aui-font-size-12 text">关注</p>
                  </li>
                  <li tapmode onclick="openWin('fans_win')">
                      <p class="numBold">{{=it.fans || '0'}}</p>
                      <p class="aui-font-size-12 text">粉丝</p>
                  </li>
                  <li>
                    {{if(it.like < 10000){}}
                      <p class="numBold">{{=it.like || '0'}}</p>
                    {{}else{}}
                      <p class="numBold">{{=it.like || '0'}}万</p>
                    {{}}}
                      <p class="aui-font-size-12">获赞</p>
                  </li>
              </ul>
              <div class="nameLike aui-flex-col aui-hide aui-flex-between" id="nameLike">
                <div class="aui-font-size-14 color-333 text-bold">{{=it.user_nickname}}</div>
                <div></div>
                {{if(it.is_concerned == -1){}}
                <div class="follow" tapmode onclick="onFollow(this)">+关注</div>
                {{} else {}}
                <div class="follow disbale" tapmode onclick="onFollow(this)">已关注</div>
                {{}}}
              </div>
          </div>
          <div class="aui-tab" id="type-tab">
              <div class="aui-tab-item aui-active" tapmode onClick="getListTab(0);"><span class="my">我</span>的文章<span class="aui-padded-l-5">{{=it.myarticle || '0'}}</span></div>
              <div class="aui-tab-item" tapmode onClick="getListTab(1);"><span class="my">我</span>的收藏<span class="aui-padded-l-5">{{=it.mycollect || '0'}}</span></div>
              <div class="aui-tab-item" tapmode onClick="getListTab(2);"><span class="my">我</span>的推荐<span class="aui-padded-l-5">{{=it.myrecommend || '0'}}</span></div>
          </div>
      </div>
    </script>
  <div class="notData aui-hide aui-flex-row aui-flex-middle" style="min-height:60%">
    <img src="../../image/notdata/15.png" class="notImg" alt="">
    <div class="color-ad aui-font-size-14 txt">还没有发布文章</div>
  </div>
  <div class="comFlowBox">
  	<div class="comGodList" id="flow_html">
  		<div class="grid-sizer"></div>


  	</div>
  </div>
  <script type="text/x-dot-template" id="flow_tpl">
    {{ for(var i in it){ }}
      <div class="item" data-id="{{=it[i].article_id}}" data-userid="{{=it[i].article_userid}}">
      	<div class="inner">
      		<div class="photo" onClick="openPostDetail({{=it[i].article_id}})"><img src="{{=it[i].article_cover}}" alt=""></div>
      		<div class="textBox">
      			<div class="title aui-flex-col aui-flex-middle">
      				<div class="aui-ellipsis-2">{{=it[i].article_content}}</div>
      			</div>
      			<div class="btmInfo aui-flex-col aui-flex-middle aui-flex-between">
      				<div><div class="avatar"><img src="{{=it[i].user_avatar}}" alt=""></div></div>
      				<div class="flex-auto name aui-ellipsis-1">{{=it[i].user_nickname || ''}}</div>
              {{if(it[i].is_like == -1){}}
              <div class="like" tapmode onClick="togLike(this)">{{=it[i].like_count || '0'}}</div>
              {{}else {}}
              <div class="like on" tapmode onClick="togLike(this)">{{=it[i].like_count || '0'}}</div>
              {{}}}
              </div>
      		</div>
      	</div>
      </div>
    {{}}}
  </script>
  <script type="text/x-dot-template" id="flowTui_tpl">
    {{ for(var i in it){ }}
        {{ if(it[i].title){ }}
        <div class="item" data-id="{{= it[i].shop_id}}" tapmode onClick="openProductDetail({{= it[i].shop_id}});">
                <div class="inner">
                    {{ if(it[i].data_amount && getUserVip()>1 ){ }}
                    <div class="earn">赚￥{{= it[i].data_amount}}</div>
                    {{ } }}
                    <div class="photo"><img src="{{= it[i].pict_url}}" alt=""></div>
                    <div class="textBox">
                        <div class="title aui-flex-col aui-flex-middle">
                            <div class="aui-ellipsis-2"><span class="tag">{{= it[i].user_type }}</span>{{= it[i].title }}</div>
                        </div>
                        <div class="aui-flex-col aui-flex-middle priceBox">
                <div class="nowPrice">¥{{= it[i].coupon_amount }}</div>
                <div class="delPrice">¥<del>{{= it[i].zk_final_price }}</del></div>
              </div>
                        <div class="aui-flex-col aui-flex-middle aui-flex-between">
                            {{ if( it[i].coupon_info ){ }}
                            <dl class="quan outline aui-flex-col aui-flex-middle">
                                <dt>券</dt>
                                <dd>{{= it[i].coupon_info }}元</dd>
                            </dl>
                            {{ }else{ }}
                            <div></div>
                            {{ } }}
                            <div class="sale">月销 {{= it[i].volume }}件</div>
                        </div>
                    </div>
                </div>
        </div>
        {{ } }}
    {{}}}
  </script>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="../../script/masonry.pkgd.min.js"></script>
<script type="text/javascript">
  var gridDom = '#flow_html';
  var grid;
  var isLoading = false;
  var loadFlag = true;
  var pageSize = 50;
  var currentPage = 1;
  var num = 0;
  var USER_ID;
  var visitor;
  apiready = function() {
    api.parseTapmode();
    USER_ID = api.pageParam.itemId;
    if(USER_ID && USER_ID != getUserId()){
      visitor = getUserId();
    }else {
      USER_ID = getUserId();
      visitor = '';
    }
    // 监听到达底部
    api.addEventListener({
      name: 'scrolltobottom',
      extra: {
        threshold: 0
      }
    }, function(ret, err) {
      if(isLoading) return;
      if(loadFlag){
        getListTab(num)
      }
    });
    getListTab(num)
    getMyPage()
  };
  // 获取我的主页
  function getMyPage(){
    console.log(USER_ID)
    log(visitor)
    api.ajax({
        url: BASE_URL + 'App/Article/myPage',
        method: 'post',
        data: {
            values: {
              userid: USER_ID,
              visitor: visitor
            },
        }
    },function(ret, err){
        if (ret && ret.code == 1) {
            var tpl = $$('#dot_tpl').html();
            var tempFn = doT.template(tpl);
            $$('#dot_html').html(tempFn(ret.data));
            api.sendEvent({
                name: 'mydraftEvent',
                extra: {
                    mydraft: ret.data.mydraft
                }
            });
            if(USER_ID == getUserId()){
              $$('.my').text('我');
            }else{
              $$('.my').text('Ta');
              $$('.nameLike').removeClass('aui-hide');
              $$('#myName').addClass('aui-hide');
            }
        } else {
          toast(ret.msg)
        }
    });
  }
  function getListTab(ind) {
      $$('#type-tab > div').removeClass('aui-active').eq(ind).addClass('aui-active');
      //当前页面发生改变，刷新currentPage
      if( num != ind){
          num = ind
          currentPage = 1
      }
      if(ind == 0){
        showProgress();
        isLoading = true;
        api.ajax({
            url: BASE_URL + 'App/Article/myArticleList',
            method: 'post',
            data: {
                values: {
                  userid: USER_ID,
                  visitor: visitor,
                  pageNo: currentPage,
                  pageSize: pageSize
                },
            }
        },function(ret, err){
            if (ret) {
              if(ret.code == 1 && ret.data.length > 0){
                $$('.notData').addClass('aui-hide');
                  getFlow(ret.data);
                  currentPage++;
                  api.parseTapmode();
                  //如果加载出来的数量 小于 pagesize 说明到底线了
                  if(ret.data.length < pageSize){
                      loadFlag = false;
                  }
                }else{
                  if(currentPage == 1){
                      $$('#flow_html').html('');
                      $$('.notData').removeClass('aui-hide');
                      $$('.notData>.txt').text('还没有发布文章');
                  }
                  loadFlag = false;
                }
            }
            isLoading = false;
            hideProgress();
        });
      }
      if(ind == 1){
        showProgress();
        isLoading = true;
        api.ajax({
            url: BASE_URL + 'App/Article/collectArticles',
            method: 'post',
            data: {
              values: {
                userid: USER_ID,
                visitor: visitor,
                pageNo: currentPage,
                pageSize: pageSize
              },
            }
        },function(ret, err){
            if (ret) {
              if(ret.code == 1 && ret.data.length > 0){
                $$('.notData').addClass('aui-hide');
                  getFlow(ret.data);
                  currentPage++;
                  api.parseTapmode();
                  //如果加载出来的数量 小于 pagesize 说明到底线了
                  if(ret.data.length < pageSize){
                      loadFlag = false;
                  }
                }else{
                  if(currentPage == 1){
                      $$('#flow_html').html('');
                      $$('.notData').removeClass('aui-hide');
                      $$('.notData>.txt').text('还没有收藏文章');
                  }
                  loadFlag = false;
                }
            }
            isLoading = false;
            hideProgress();
        });

      }
      if(ind == 2){
        showProgress();
        isLoading = true;
        api.ajax({
            url: BASE_URL + 'App/Article/myRecommend',
            method: 'post',
            data: {
              values: {
                userid: USER_ID,
                pageNo: currentPage,
                pageSize: pageSize
              },
            }
        },function(ret, err){
            if (ret) {
              if(ret.code == 1 && ret.data.length > 0){
                  $$('.notData').addClass('aui-hide');
                  getFlow(ret.data);
                  currentPage++;
                  api.parseTapmode();
                  //如果加载出来的数量 小于 pagesize 说明到底线了
                  if(ret.data.length < pageSize){
                      loadFlag = false;
                  }
                }else{
                  if(currentPage == 1){
                      $$('#flow_html').html('');
                      $$('.notData').removeClass('aui-hide');
                      $$('.notData>.txt').text('还没有推荐商品');
                  }
                  loadFlag = false;
                }
            }
            isLoading = false;
            hideProgress();
        });
      }
  }
  //调用瀑布流
  grid = new Masonry( gridDom, {
    columnWidth: '.grid-sizer',
    itemSelector: '.item',
    percentPosition: true
  });
  imagesLoaded( gridDom, function() {
    grid.layout();
  });

  //瀑布流
  function getFlow(flowData) {
      if(num == 2){
        var tpl = $$('#flowTui_tpl').html();
      }else{
        var tpl = $$('#flow_tpl').html();
      }
      var tempFn = doT.template(tpl);
      var elem = $$(tempFn(flowData));
      if( currentPage==1 ){
          $$('#flow_html').html('<div class="grid-sizer"></div>');
      }
      $$(gridDom).append(elem);
      grid.appended(elem);
      imagesLoaded(gridDom, function() {
          grid.layout();
      });

      api.parseTapmode();
  }
  function onFollow(el){
    var _this = $$(el);
  	if( !_this.hasClass('disbale') ){
  		queren(USER_ID);
  	}else{
  		var confirmMaskTxt = ['是否取消关注？','取消','确认'];
  		openConfirmMask(confirmMaskTxt,'queren('+USER_ID+')');
  	}
  }
  function queren(id){
  		api.ajax({
  			url: BASE_URL + 'App/Article/userFollow',
  			method: 'post',
  			data: {
  				values: {
  					userid: getUserId(),
  					concerned_userid: id
  				}
  			}
  		},function(ret, err){
  			if (ret) {
  				if(ret.code == 1){
  					api.execScript({
  						 name: 'fans_win',
  						 frameName: 'fans_frm',
  						 script: 'getFanList();'
  				 });
           api.execScript({
              name: 'follow_win',
              frameName: 'follow_frm',
              script: 'getfollowList();'
          });
  					toast(ret.msg);
            getMyPage()
  				}else{
  					toast(ret.msg);
  				}
  			}
  		});
  }
  //喜欢 不喜欢切换
  	function togLike(el){
      if(visitor){
        USER_ID = visitor
      }
      var _this = $$(el);
      var item = _this.parents('.item');
      var itemId = item.data('id');
      var userId = item.data('userid');
      var count = parseInt(_this.html());
      api.ajax({
          url: BASE_URL + 'App/Article/articleLike',
          method: 'post',
          data: {
              values: {
                userid: USER_ID,
                article_id: itemId,
                article_userid: userId
              }
          }
      },function(ret, err){
          if (ret) {
              if(ret.code == 1){
                if(ret.msg == '点赞成功'){
                  // getMyPage()
                  _this.addClass('on');
                  count+=1;
  								_this.html(count);
                }else{
                  _this.removeClass('on');
                  count-=1;
  								_this.html(count);
                }
                toast(ret.msg)
              }
          }else{
            toast(ret.msg)
          }
      });
  	}
  //打开点赞文章详情
  function openPost(){
  	api.openWin({
  		name: 'post_detail_win',
  		url: '../post/post_detail_win.html',
  		bounces: false,
  		pageParam: {
  			key : 'value'
  		}
  	});
  }
  function openWin(url){
    api.execScript({
        name: 'follow_win',
        frameName: 'follow_frm',
        script: 'closeWin();'
    });
    setTimeout(function(){
      api.openWin({
          name: url,
          url: url + '.html',
          pageParam: {
            visitorId: USER_ID,
            fans: 'fans'
          }
      });
    },1000)

  }
  function closeWin(){
    api.closeWin();
  }
</script>
</html>
